<template>
  <div>
    <dl v-for="(v, i) in list" :key="i" style="display: flex;" @click="router.push({
      path: `/detail/${v.id}`,
      query: v
    })">
      <dt>
        <img :src="v.image" alt="">
      </dt>
      <dd>
        <h3>{{ v.title }}</h3>
        <p>{{ v.desc }}</p>
      </dd>
    </dl>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router';

const list = ref([]);
const router = useRouter()
const getList = async () => {
  const resp = await axios.get('/list')
  console.log(resp.data)
  list.value = resp.data
}

getList()
</script>